<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            margin-top: 20px;
            width: 800px;
            border: 1px solid #ddd;
            border-collapse: collapse;
        }

        td,
        th {
            border: 1px solid #ddd;
            padding: 5px 10px;
        }

        td {
            padding: 0;
            height: 30px;
        }

        td input {
            width: 100%;
            height: 30px;
            border: none;
            background-color: #ffc;
        }
    </style>
</head>

<body>
    <label for="username">姓名</label>
    <input type="text" id="username" name="username">
    <label for="age">年龄</label>
    <input type="text" id="age" name="age">
    <label for="tel">电话</label>
    <input type="text" id="tel" name="tel">
    <label for="qq">QQ号</label>
    <input type="text" id="qq" name="qq">
    <button id="btnSave">保存</button>
    <div class="list">
        <table id="tableList">
            <thead>
                <tr>
                    <th width="40">序号</th>
                    <th width="160">姓名</th>
                    <th width="60">年龄</th>
                    <th width="160">电话</th>
                    <th width="160">QQ号</th>
                    <th width="60">操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>18</td>
                    <td>187876</td>
                    <td>238687</td>
                    <td>
                        <button>删除</button>
                    </td>
                </tr> -->
            </tbody>
        </table>
    </div>

    <script>
        // 把元素添加到其他元素前面
        var btnSave = document.querySelector('#btnSave');
        var username = document.querySelector('#username');
        var age = document.querySelector('#age');
        var tel = document.querySelector('#tel');
        var qq = document.querySelector('#qq');
        var tbody = document.querySelector('tbody');
        var index = 0;
        // 绑定一个点击事件
        btnSave.onclick = function () {
            index++;
            var tr = document.createElement('tr');
            // 创建一个元素添加到页面
            tr.innerHTML = `<td>${index}</td>
                    <td>${username.value}</td>
                    <td>${age.value}</td>
                    <td>${tel.value}</td>
                    <td>${qq.value}</td>
                    <td>
                        <button>删除</button>
                    </td>`
            tbody.appendChild(tr);
        }
        // 用事件委托给 td（除了tr中第一个子元素 和 最后一个子元素）添加点击事件
        tbody.onclick = function (e) {
            var evt = e.target;
            // 如果点击的这个元素不是 tr中第一个td 和最后一个td 那么就操作可编辑的功能
            // 不是第一个 也不是 最后一个 同时满足这两个条件 && 
            if (evt !== evt.parentNode.firstElementChild && evt !== evt.parentNode.lastElementChild) {
                //   可编辑（只有input元素可以输入）
                var input = document.createElement('input');
                input.value = evt.innerHTML;
                evt.innerHTML = '';
                evt.appendChild(input);
                input.focus(); 
                //马上获取焦点

                // 当input失去焦点的时候 
                // 把input的value值赋值 evtinnerHTML
                // 并且把input移出
                input.onblur = function () {
                    evt.innerHTML = input.value;
                }
            }

            // 删除按钮的功能
            if (evt.tagName.toLowerCase() === 'button') {
                var parent = evt.parentNode.parentNode;
                var res = confirm('你确认要删除吗？')
                // 弹窗确认是否需要删除
                if (res) {
                    parent.remove();
                }
            }

        }
    </script>
</body>

</html>